<template>
	<view class="navigation u-flex">
		<view class="left u-flex u-row-between u-flex-1 u-p-l-30 u-p-r-30" v-if="token">
			<view class="item u-flex-col u-row-center u-col-center">
				<u-icon name="chat" :size="36" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-content-color u-font-24" @click="onOpen('联系商家')">联系商家</view>
			</view>
			<view class="item u-flex-col u-col-center">
				<u-icon name="home" :size="36" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-content-color u-font-24" @click="onOpen('进店逛逛')">进店逛逛</view>
			</view>
			<view class="item u-flex-col u-col-center">
				<u-icon name="heart" :size="36" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-content-color u-font-24" @click="onOpen('关注商家')">关注商家</view>
			</view>
		</view>
		<view v-else class="left u-flex-1 u-text-center">登录后可用糖果抵扣</view>
		<view class="right">
			<view class="buy u-type-main-bg u-font-28" v-if="token" @click='buy'>立即购买</view>
			<view class="buy u-type-main-bg u-font-28" v-else @click="login">前往登录</view>
		</view>
		<u-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" border-radius="20" :closeable="true">
			<!-- style="max-height: 800rpx;overflow-y: scroll;" -->
			<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
				<view class="u-p-t-90 u-p-l-30 u-p-r-30 u-p-b-50" style="max-height: 800rpx;">
					<view class="u-flex u-col-center u-m-b-30">
						<view class="u-p-r-20">
							<u-image @click="viewImage(detaileData.skuPicUrl||details.productMainImageUrl)"
								:src="detaileData.skuPicUrl||details.productMainImageUrl"
								style="width: 160rpx;height: 160rpx;"></u-image>
						</view>
						<view class="u-flex-col u-row-between" style="height: 160rpx;">
							<view class="u-type-warning-dark u-font-32 u-f-w">
								¥{{detaileData.skuSalePrice||details.productSalePrice}}</view>
							<view class="u-type-info">库存：{{detaileData.skuTotalStocks||details.totalStocks}}</view>
							<view v-if="propertiesValue" class="u-type-info">
								已选择：{{propertiesValue}}
							</view>
							<view v-else class="u-type-info">请选择商品规格信息</view>
						</view>
					</view>
					<view class="u-m-b-30">
						<view v-for="(item,index) in skuList" :key="index">
							<view class="u-p-b-20 u-p-t-30">{{item.specName}}</view>
							<view class="u-flex u-flex-wrap">
								<u-tag class="u-m-r-20 u-m-b-20" v-for="(item2,index2) in item.specDetails" :key="index2"
									:text="item2.specDetailName" mode="dark"
									:style="{'backgroundColor':item2.active?$u.color.warningDark:'#f2f2f2','color': item2.active?'#ffffff':'#555','fontSize':'28rpx'}"
									@click="tagClick(item.id,item2.id)">
								</u-tag>
							</view>
						</view>
					</view>

					<view class="u-type-warning-dark u-flex u-row-between u-m-t-30">
						<view>
							{{this.$u.math.NumberMul(Number(detaileData.saleSweet||details.saleSweet),Number(buyNums))}}糖果抵扣{{this.$u.math.NumberMul(Number(detaileData.deductPrice||details.deductPrice),Number(buyNums))}}元
						</view>
						<u-checkbox-group>
							<u-checkbox @change="checkedChange" :value="SweetChecked" shape="circle" active-color="#FF6801"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="u-flex u-row-between u-m-b-30 u-m-t-70">
						<view class="u-p-r-40">购买数量</view>
						<view>
							<u-number-box :min="1" v-model="buyNums"></u-number-box>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="u-p-30">
				<view class="btn u-text-center u-p-20" @click="buys">立即购买</view>
			</view>
		</u-popup>
		<mask-weixin :maskDown="maskDown" @close="maskDown = false" />
	</view>
</template>

<script>
	import maskWeixin from '@/components/mask-weixin.vue'
	export default {
		components: {
			maskWeixin
		},
		data() {
			return {
				isWeXin: false,
				maskDown: false,
				show: false,
				buyNums: 1,
				detaileData: {},
				active: false,
				propertiesValue: '',
				selectProperties: {}
			}
		},
		props: {
			token: {
				type: String,
				default: ''
			},
			details: {
				type: Object,
				default: {}
			},
			sku: {
				type: Array,
				default: []
			},
			productId: {
				type: String,
				default: ''
			},
			checked:{
				type:Boolean,
				default:false
			}
		},
		mounted() {
			this.isWeXin = this.$u.utils.isWeiXin();
		},
		computed: {
			skuList() {
				if (!this.token) return
				var _this = this;
				this.sku.forEach(item => {
					item.specDetails.forEach((i, index) => {
						if (index == 0) {
							i.active = true;
							_this.selectProperties[item.id] = i.id;
						} else {
							i.active = false;
						}
					})
				})
				if(Object.keys(_this.selectProperties).length!=0){
					this.getPorperties()
				}
				return _this.sku
			},
			SweetChecked(){
				return this.checked;
			}
		},
		methods: {
			onOpen(val) {
				this.$u.toast(val + '暂未开通');
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			buy() {
				if (this.isWeXin) {
					this.maskDown = true;
					return
				} else {
					if (this.skuList.length == 1 && this.skuList[0].specDetails.length == 1) {
						uni.navigateTo({
							url: `/pages/mallDetails/comfirmOrder?productId=${this.productId}&buyNums=${this.buyNums}&properties=${JSON.stringify(this.selectProperties)}&merShortName=${this.details.merShortName}&isUseCoupon=${this.details.isUseCoupon}&mid=${this.details.mid}&checked=${this.checked}`
						})

					} else {
						this.show = true;
					}
				}
			},
			buys() {
				if (this.isWeXin) {
					this.maskDown = true;
					return
				} else {
					uni.navigateTo({
						url: `/pages/mallDetails/comfirmOrder?productId=${this.productId}&buyNums=${this.buyNums}&properties=${JSON.stringify(this.selectProperties)}&merShortName=${this.details.merShortName}&isUseCoupon=${this.details.isUseCoupon}&mid=${this.details.mid}&checked=${this.checked}`
					})
				}
			},
			tagClick(id, id2) {
				this.skuList.forEach(item => {
					if (id == item.id) {
						item.specDetails.forEach(i => {
							if (id2 == i.id) {
								i.active = true;
								this.selectProperties[id] = id2;
							} else {
								i.active = false
							}
						})
					}
				})
				this.getPorperties();
			},
			getPorperties() {
				this.$u.api.selectSKU({
					productId: this.productId,
					selectProperties: this.selectProperties
				}).then(res => {
					if (res.code == 0) {
						this.detaileData = res.data;
						this.propertiesValue = res.data.propertiesValue;
					}else{
						this.$u.toast(res.msg);
					}
				})
			},
			viewImage(url) {
				let arr = [];
				arr.push(url);
				uni.previewImage({
					urls: arr
				});
			},
			checkedChange(e){
				this.$emit('changeChecked',e.value)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navigation {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ffffff;
		height: 98rpx;
	}

	.buy {
		color: white;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		width: 300rpx;
	}

	.btn {
		background: $u-custom-color !important;
		color: white;
		border: none;
		border-radius: 40rpx;
	}
</style>
